<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		#A1{
			width: 510px;
			height: 335px;
			margin:0px auto;
			position: relative;
			
		}
		#A1 ul{
			width: 2500px;
			position: relative;
			
		}
		#A1 li{
			float: left;
			//display: none;
		}
		
		#A1 .aa{
			position: relative;
		}
		ol{
			position: absolute;
			 bottom:0px;
			 left:50%;
			transform: translateX(-50%);
		}
		ol li{
			margin:5px 5px;
            width:10px;
            height: 10px;
            border-radius: 50%;
            background:white;
            float: left; 
            cursor: pointer;
		}
		span{
			position: absolute;
			top:50%;
			transform: translateY(-50%);
			background:wheat;
			cursor: pointer;
			font-size: 32px;
		}
		.left{
			left: 1px;
			}
		.right{
			right: 10px;
		}
		#C1{
			background: darkmagenta;
		}
	</style>
	<body>
		<div id="A1">
			<ul id="box">
				<li class="aa"><img src="images/1.jpg" ></li>
				<li><img src="images/2.jpg" ></li>
				<li><img src="images/3.jpg" ></li>
				<li><img src="images/4.jpg" ></li>
			</ul>
			<ol id="list">
				<li id="C1"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			
		</div>
		
	</body>
	<script type="text/javascript">
		var A1=document.getElementById('A1');
		var box=document.getElementById('box');
		var list=document.getElementById('list').children;
		var timer;
		var num=0;
		function fn(){
		    timer=setInterval(function(){
		        num--;
		        if(num<-3){
		            num=0
		        }
		        for(var i=0;i<list.length;i++){
		            list[i].id='';
		        }
		        list[-num].id='C1';
		        box.style.left=510*num+'px';
		
		    },1000)
		}
		fn()
		A1.onmouseenter=function(){
		    clearInterval(timer);
		}
		A1.onmouseleave=function(){
		    fn()
		}
		for(var i=0;i<list.length;i++){
		    list[i].index=i;
		    list[i].onclick=function(){
		        for(var n=0;n<list.length;n++){
		            list[n].id=''
		        }
		        this.id='C1';
		        var m=this.index;
		        num=-m;
		        box.style.left=510*num+'px';
		    }
		}
	</script>
</html>
